<template>
    <div class="item-all-wrap" @click="goDetail(item)">
        <div class="item-default-img flex-wrap flex-middle flex-center" :style="{
            background: 'url(' + (item.logoHttpUrl || item.imageHttpUrl) + ') center no-repeat'
          }"  v-if="item.logoHttpUrl || item.imageHttpUrl">
          <div class="item-default-text ellipsis2">{{item.name}}</div>
        </div>
        <div class="item-default-img flex-wrap flex-middle flex-center"
             :class="(item.courseType === 'L' && 'live-' + item.liveStatus) ||
               (((item.courseType === 'MEET' || item.courseType === 'TX_MEET') && (item.livestatus == 2 || item.livestatus == 3 || item.livestatus == 4) ? 'live-top gray' : '')) ||
              (((item.courseType === 'MEET'|| item.courseType === 'TX_MEET') ? 'live-top' : ''))" v-else>
          <div class="item-default-text ellipsis2">{{item.name || ''}}</div>
        </div>
        <div class="item-content-wrap flex-wrap">
          <div class="content-title ellipsis2">【{{ getTypeName(item) }}】{{ item.name }}</div>
          <div>
            <div class="fs-12 fc-666">开始时间：{{ item.realStartDate || item.startDate }}</div>
            <div class="fs-12 fc-666" v-if="item.courseType !== 'L' && item.courseType !== 'L'">结束时间：{{ item.endDate || '无限期' }}</div>
          </div>
        </div>
        <div class="pub-corner" v-if="item.courseType === 'PUBC'">
          <span>{{item.publicCourseLabel || '公开课'}}</span>
        </div>
    </div>
</template>

<script>
import { manaTypes } from "@/assets/js/constant"
export default {
    data() {
        return {
            tabList: manaTypes,
        }
    },

    props: {
        item: {
            type: Object,
            default: () => {}
        }
    },
    methods: {
        getTypeName(item) {
            let res = this.tabList.find(ms => ms.type === item.courseType)
            return res ? res.name : item.courseType === 'T' ? '培训项目' : ''
        },

        goDetail(item) {
            let routeData = null
            if (item.courseType === 'MEET') {
              routeData = {
                name: 'public-living-detail-id',
                params: {
                  id: item.courseId
                }
              }
            } else if (item.courseType === 'L') {
              this.$toast.warning('直播开启，请前往pc端进行操作')
              return
              // routeData = {
              //   name: 'live-detail-id',
              //   params: {
              //     id: item.courseId
              //   }
              // }
            } else if (item.courseType === 'OT') {
              routeData = {
                name: 'offlineTrain-detail-id',
                params: {
                  id: item.courseId
                }
              }
            }
            if (routeData) {
              this.$uniPush(routeData)
            } else {
              this.$toast.warning('暂不支持，敬请期待')
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.item-all-wrap {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #fff;
    position: relative;
    .pub-corner {
        top: 0;
        left: 103px;
    }
    img {
        width: 144px;
        height: 81px;
        margin-right: 10px;
    }
    .item-default-img{
        min-width: 144px;
        width: 144px;
        height: 81px;
        background: url('/static/image/course-img.png') no-repeat;
        background-size: contain !important;
        margin-right: 10px;
        &.live-top {
          height: 69px;
          background: url('../../static/image/live_status_round_1.png') center no-repeat !important;
          background-size: cover !important;
          &.gray {
            background: url('../../static/image/live_status_round_0.png') center no-repeat !important;
            background-size: cover !important;
            .date {
              color: #333;
            }
          }
        }
        .item-default-text{
            font-size: 12px;
            color: #fff;
            text-align: center;
            padding: 0 10px;
        }
    }
    .item-content-wrap {
      flex-wrap: wrap;
      align-content: space-between;
      .content-title {
        width: 100%;
        font-size: 14px;
        font-weight: 600;
        line-height: 24px;
      }
    }
}
</style>